<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- -->
    <script type="importmap">
        {
            "imports":{
                "three":"./node_modules/three/build/three.module.js",
                "three/addons/":"./node_modules/three/examples/jsm/"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import {AxesHelper,AmbientLight,PerspectiveCamera,Scene,PointLight,WebGLRenderer,BoxGeometry,MeshBasicMaterial,MeshLambertMaterial} from 'three';

        // 导入gltf加载器
        import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js'
        // 导入相机轨道控制器
        import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
        // 屏幕宽高
        const width=window.innerWidth;
        const height=window.innerHeight;
        // 创建场景
        const scene=new Scene();
        // 设置场景背景色
        scene.background=new THREE.Color(0xE98034);
        console.log(scene,123);

        // 创建透视相机
        const camera=new PerspectiveCamera(45,width/height,1,1000);
        // 设置相机位置
        camera.position.set(0,10,38);
        // 设置相机的观察位置
        camera.lookAt(0,0,0);

        // // 创建环境光
        const ambientLight=new AmbientLight(0xffffff,0.5);
        // 将环境光添加到场景中
        scene.add(ambientLight);

        // 创建点光源
        const pointLight=new PointLight(0xffffff,1);
        // 设置点光源的位置
        pointLight.position.set( 200, 200, 200 );
        // 将点光源添加到场景中
        scene.add(pointLight);

        // // 创建坐标系
        // const axesHelper=new AxesHelper(300);
        // // 将坐标系添加到场景中
        // scene.add(axesHelper);


        // 创建一个立方体模型
        const geometry=new BoxGeometry(200,200,200);
        // 创建一个基础网格材质: 对光照不敏感
        // const material=new MeshBasicMaterial( {color: 0x123456} );
        // 创建一个漫反射材质的材质, 对光照敏感
        const material=new MeshLambertMaterial( {color: 0x123456} );

        
        // // 基于集合模式和网格材质创建一个立方体
        // const cube=new THREE.Mesh(geometry,material);
        // // 将立方体添加到场景中
        // scene.add(cube);

        // 创建渲染器
        const renderer=new WebGLRenderer({
            // 抗锯齿
            antialias:true,
            // 设置主题
            alpha:true
        });
        // 设置渲染尺寸
        renderer.setSize(width,height);

        // 创建GLTFLoader
        const loader=new GLTFLoader();
        loader.load('./gltf/gujianzhu.gltf',function(gltf){
            console.log(gltf);
            const model=gltf.scene;
            // gltf.scene.rotateY(Math.PI/180*45);
            // gltf.scene.rotateX(-Math.PI/180*10);
            gltf.scene.translateY(-5);
        
            // const box = new THREE.Box3().setFromObject(model);
            // const center = box.getCenter(new THREE.Vector3());
            // camera.position.copy(center);
            // camera.lookAt(center);
            // controls.target.set(10,2,2)

            // 将gltf模型添加到场景中
            scene.add(gltf.scene);
            // 执行一次渲染
            renderer.render(scene,camera);
            // 将渲染结果挂载到浏览器中
            document.body.appendChild(renderer.domElement);
        });

      


        // 创建相机轨道控制器
        const controls=new OrbitControls(camera,renderer.domElement);
        // 限制旋转角度
        controls.minPolarAngle=Math.PI/180*0;
        controls.maxPolarAngle=Math.PI/180*90;

        controls.addEventListener('change',function(e){
            // 重新执行一次绘制
            renderer.render(scene,camera);
        });

        // 监听屏幕尺寸变化
        window.addEventListener('resize',function(){
            // 重新设置相机宽高比
            camera.aspect=window.innerWidth/window.innerHeight;
            // 更新相机投影矩阵
            camera.updateProjectionMatrix();
            // 重新设置绘制尺寸
            renderer.setSize(window.innerWidth,window.innerHeight);
            // 设置设备像素比
            renderer.setPixelRatio(window.devicePixelRatio);
        });
    </script>
</body>

</html>